import React, { useState, useEffect, Fragment } from 'react';
import { Divider, Button, Alert } from 'antd';

export const Effect = () => {
    const [key, setKey] = useState(0);
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(`useEffect:componentDidMount\ncount=>${count},key=>${key}`);
    }, []);

    useEffect(() => {
        console.log(`useEffect:componentDidUpdate\ncount=>${count},key=>${key}`);
    }, [count, key]);

    useEffect(() => {
        console.log(
            `useEffect:componentDidUpdate\nkey不在监听的数组里面,所以key更新的时候不会输出这个`,
        );
    }, [count]);

    useEffect(
        () => () => {
            console.log('useEffect:componentWillUnmount');
        },
        [],
    );

    const addCount = () => {
        setCount(count + 1);
    };
    const addKey = () => {
        setKey(key + 1);
    };

    return (
        <Fragment>
            <Divider orientation="left">component</Divider>

            <Alert
                message="useEffect"
                description={
                    <p>
                        生命周期函数集合(componentDidMount componentDidUpdate componentWillUnmount)
                    </p>
                }
                type="info"
            />
            <pre>
                {/* useEffect(() => {
          componentDidMount componentDidUpdate
          return ()=>{
            componentWillUnmount
          }
        }, [需要跟踪的变量,如果没哟则相当于componentWillUnmount ]); */}
            </pre>
            <p>count: {count}</p>
            <p>key: {key}</p>
            <Button onClick={addCount}>count + 1</Button>
            <Button onClick={addKey}>key + 1</Button>
        </Fragment>
    );
};
